<template>
        <div>
            <div class="emp_top">
                <p>
                    学生姓名: <el-input v-model="props.sou.stuName" style="width: 150px" placeholder="输入姓名" />
                </p>
                <p>市场部:<el-select v-model="props.sou.origin" placeholder="选择市场部" size="large" style="width: 140px">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </p>
                <p>学院: <el-select v-model="props.sou.collegeId" placeholder="选择学院" size="large" style="width: 140px">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </p>
    
                <p>工作城市:
                    <!-- <el-cascader
          v-model="sou.workCity"
          :options="city"
          
          @expand-change="handleChange"
        /> -->
                    <el-select
          v-model="props.sou.workCity"
          placeholder="请选择城市"
          @change="handleChange"
          size="large"
          style="width: 140px"
        >
          <el-option
            v-for="item in city"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
    </p>
    
            </div>
            <p>
                <el-button type="primary" @click="query()">查询</el-button>
            </p>
        </div>
</template>
    
<script setup lang='ts'>
    import { reactive, ref,defineProps } from 'vue'

//  // 分页
//  const currentPage = ref(1)
//     const pageSize=ref(10)
    const props=defineProps({
        props:Object,
        sou:Object,
        options:Array,
        options1:Array,
        workCity:Array,
        query:Function,
        handleCurrentChange:Function,
        city:Array,
    })
    const query=()=>{
        // 查询数据
        if(props.query){
            props.query()
        }
    }
    const handleChange = (value) => {
      if(props.handleChange){
        props.handleChange(value)
      }
    }
    
</script>
    
<style lang="scss" scoped>
.emp_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        width: 80%;
        // background-color: pink;
    }

</style>
